<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>大屏</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <style type="text/css">
        .bg-div {
            width: 100%;
            height: 100%;
            background-image: url("/report/bodybg.png");
            background-size: cover;
        }
        .title-div {
            color: white;
            font-size: 2.3vw; /* 使用视窗单位实现文字缩放 */
            text-align: center;
            background-image: url("/report/titlebg.png");
            background-size: contain; /* 关键：保持图片完整显示 */
            background-repeat: no-repeat;
            background-position: center;
            height: 10%;
            justify-content: center; /* 水平居中 */
            align-items: center;     /* 垂直居中 */
            position: relative;      /* 为可能的伪元素定位做准备 */
        }
        .report-div {
            height: 90%;
        }
        .report-son-1 {
            height: 100%;

            padding: 2px 5px 0 5px;

        }

        .report-son-1-1 {
            height: 100%;
            background-image: url("/report/mid1.png");
            background-size: 100% 100%; /* 关键：拉伸填充整个容器 */
            background-repeat: no-repeat;
            background-position: center;
            color: white;
            text-align: center;
        }

        .report-son-2 {

            display: flex;          /* 启用Flex布局 */
            flex-direction: column; /* 垂直排列子元素 */
        }
        .report-son-title {
            font-size: 1.2vw;
            color: white;
            line-height: 2vw;
            height: 2vw; /* 固定高度 */
            background-image: url("/report/titleSub.png");
            background-size: 100% 100%; /* 关键：拉伸填充整个容器 */
            background-repeat: no-repeat;
            background-position: center;
            padding-left: 1vw;
        }
        .report-son-body {
            flex-grow: 1;           /* 占满剩余空间 */
            overflow: auto;         /* 内容溢出时滚动 */
            background-image: url("/report/bodySub.png");
            background-size: 100% 100%; /* 关键：拉伸填充整个容器 */
            background-repeat: no-repeat;
            background-position: center;
        }
        .report-son-body-1  {
            height: 50%;
        }
        .report-son-body-2{
            height: 100%;
            padding: 0;
        }
        .left1-buts {
            display: grid;
            place-items: center; /* 同时水平和垂直居中 */
        }
        .left1-buts div a{
           margin-right: 10px;
        }
        .report-son-1-1-body {
            padding-top: 35%;
            height: 60%;
            font-size: 3vw;
        }
        .report-son-1-1-title {
            height: 40%;
            padding-top: 10%;
            font-size: 1.5vw;
        }
    </style>
</head>

<body class="gray-bg">
    <div  class="bg-div">
        <div class="title-div">
            <div style="height: 67%">信用城市可视化大屏</div>
            <div id="timeS" style="font-size: 0.8vw;"></div>
        </div>
        <div class="report-div">
            <div class="report-son-1 col-md-3">
                <div class="report-son-2" style="height: 33%">
                    <div class="report-son-title">月服务开通及使用人数</div>
                    <div class="report-son-body">
                        <div class="left1-buts" style="height: 25%" id="left1But">
                            <div>
                                <a class="btn btn-success btn-outline  active buts" onclick="getLeft1(this)">
                                    信用租赁
                                </a>
                                <a class="btn btn-success btn-outline  buts" onclick="getLeft1(this)">
                                    酒店预定
                                </a>
                                <a class="btn btn-success btn-outline  buts" onclick="getLeft1(this)">
                                    便捷泊车
                                </a>
                                <a class="btn btn-success btn-outline buts" onclick="getLeft1(this)">
                                    舒心就医
                                </a>
                            </div>
                        </div>
                        <div style="height: 75%" id="left1"></div>
                    </div>
                </div>
                <div class="report-son-2" style="height: 33%">
                    <div class="report-son-title">各项服务授信额度</div>
                    <div class="report-son-body" id="left2"></div>
                </div>
                <div class="report-son-2" style="height: 33%">
                    <div class="report-son-title">各地区信用分分布</div>
                    <div class="report-son-body" id="left3"></div>
                </div>
            </div>
            <div class="report-son-1 col-md-6">
                <div class="" style="height: 33%">
                    <div class="report-son-1-1 col-md-4" >
                        <div class="report-son-1-1-body" id="mid1-1" ></div>
                        <div class="report-son-1-1-title" >周使用量</div>
                    </div>
                    <div class="report-son-1-1 col-md-4" >
                        <div class="report-son-1-1-body" id="mid1-2"></div>
                        <div class="report-son-1-1-title" >总使用量</div>
                    </div>
                    <div class="report-son-1-1 col-md-4" >
                        <div class="report-son-1-1-body" id="mid1-3"></div>
                        <div class="report-son-1-1-title" >总开通量</div>
                    </div>
                </div>
                <div class="report-son-2" style="height: 66%" id="mid2"></div>
            </div>
            <div class="report-son-1 col-md-3">
                <div class="report-son-2" style="height: 56%">
                    <div class="report-son-title">用户画像</div>
                    <div class="report-son-body">
                        <div class="report-son-body-1">
                            <div class="col-md-6 report-son-body-2"  id="right1-1"></div>
                            <div class="col-md-6 report-son-body-2" id="right1-2"></div>
                        </div>
                        <div class="report-son-body-1">
                            <div class="col-md-6 report-son-body-2" id="right1-3"></div>
                            <div class="col-md-6 report-son-body-2" id="right1-4"></div>
                        </div>
                    </div>
                </div>
                <div class="report-son-2" style="height: 43%">
                    <div class="report-son-title">人群收入情况</div>
                    <div class="report-son-body" id="right2"></div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: echarts-js" />
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script type="text/javascript">
        $(document).ready(() => {
            const timeSpan = $('#timeS')[0];
            function formatTime(date) {
                const pad = n => n.toString().padStart(2, '0');
                return `${date.getFullYear()}年${pad(date.getMonth() + 1)}月${pad(date.getDate())}日 ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}\u00A0\u00A0\u00A0\u00A0`;
            }
            let lastTime = '';
            function updateTime() {
                const now = new Date();
                const newTime = formatTime(now);
                if (newTime !== lastTime) {
                    timeSpan.textContent = newTime;
                    lastTime = newTime;
                }
                requestAnimationFrame(updateTime);
            }
            updateTime();
            getReportData('/rpt/left1?serverType=信用租赁','restLeft1')
            getReportData('/rpt/left2','restLeft2')
            getReportData('/rpt/left3','restLeft3')
            getReportData('/rpt/mid1','restMid1')
            getReportData('/rpt/mid2','restMid2')
            getReportData('/rpt/right11','restRight11')
            getReportData('/rpt/right12','restRight12')
            getReportData('/rpt/right13','restRight13')
            getReportData('/rpt/right14','restRight14')
            getReportData('/rpt/right2','restRight2')
        });

        function getLeft1(e) {
            $('.buts').removeClass('active');
            $(e).addClass('active');
            getReportData('/rpt/left1?serverType='+$(e).text().trim(),'restLeft1')

        }

        function restLeft1(e) {
            var scatterChart = echarts.init(document.getElementById("left1"));
            // 从数据中提取 groups, syNum, ktNum
            var xAxisData = e.map(item => item.groups);
            var barData = e.map(item => item.syNum);
            var lineData = e.map(item => item.ktNum);

            // 计算最大值
            var maxValue = Math.max(...barData, ...lineData);

            // 计算合适的间隔 (向上取整到接近的 50 或 100 的倍数)
            let interval = Math.ceil(maxValue / 5 / 50) * 50;

            // 如果interval太小，则调整为更合适的范围
            if (interval < 50) {
                interval = Math.ceil(maxValue / 5 / 10) * 10;
            }
            if (interval < 10) {
                interval = Math.ceil(maxValue / 5) ;
            }


            var scatteroption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' },
                },
                grid: {
                    top: '10%',
                    right: '9%',
                    bottom: '5%',
                    left: '8%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: "category",
                        data: xAxisData,  // 使用提取的 groups
                        axisPointer: {
                            type: "shadow",
                        },
                        axisLabel: {
                            color: '#fff'
                        }
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        min: 0,
                        max: Math.ceil(maxValue * 1.2 / interval) * interval,  // 向上取整到最接近的间隔倍数
                        interval: interval,  // 使用计算后的大整数间隔
                        axisLabel: {
                            formatter: "{value}",
                            color: '#fff'
                        },

                    },
                    {
                        type: "value",
                        min: 0,
                        max: Math.ceil(maxValue * 1.2 / interval) * interval,  // 向上取整到最接近的间隔倍数
                        interval: interval,  // 使用计算后的大整数间隔
                        axisLabel: {
                            formatter: "{value}",
                            color: '#fff'
                        },
                    },
                ],
                series: [
                    {
                        name: "使用人数", // 对应的折线图标，根据实际业务修改
                        type: "bar",
                        itemStyle: {
                            color: "#5087ec",
                        },
                        data: barData,  // 使用提取的 syNum 作为柱状图数据
                        yAxisIndex: 0,
                    },
                    {
                        name: "开通人数", // 对应的折线图标，根据实际业务修改
                        type: "line",
                        yAxisIndex: 1,
                        symbol: "circle",
                        symbolSize: 4,
                        itemStyle: {
                            color: "#abd8dd",
                        },
                        data: lineData  // 使用提取的 ktNum 作为折线图数据
                    },
                ],
            };

            scatterChart.setOption(scatteroption);
            $(window).resize(scatterChart.resize);
        }
        function restLeft2(e){
            var scatterChart = echarts.init(document.getElementById("left2"));
            var xAxisData = e.map(item => item.groups);
            var barData = e.map(item => item.num);

            let scatteroption  = {
                grid: {
                    left: '9%',
                    right: '10%',
                    bottom: '2%',
                    top: '10%',
                    containLabel: false,
                },
                xAxis: {
                    show: false,
                },
                yAxis: [
                    {
                        type: "category",
                        data: xAxisData,
                        axisTick: "none",
                        axisLine: "none",
                        axisLabel: {
                            show: true,
                            color: '#D0DEEE',  // 亮蓝色柱子
                            align: 'top',
                            verticalAlign: 'bottom',
                            padding: [10, 0, 10, 10],
                            fontSize: 20
                        },
                    }, {
                        axisTick: "none",
                        axisLine: "none",
                        show: true,
                        axisLabel: {
                            fontSize: 20,
                            position: 'insideRight', // 在上方显示
                            color: '#D0DEEE',
                            align: 'top',
                            verticalAlign: 'bottom',
                            padding: [0, 0,10, -50],
                        },
                        data: barData,
                    }
                ],
                series: [
                    {
                        name: 'value',
                        type: 'bar',
                        zlevel: 1,
                        showBackground: true,
                        backgroundStyle: {
                            opacity: 0.098,
                            color: '#FFFFFF',  // 亮蓝色柱子
                            borderRadius: 20  // 右侧圆角
                        },
                        itemStyle: {
                            color: '#36A5FF',  // 亮蓝色柱子
                            borderRadius: 20  // 右侧圆角
                        },
                        barWidth: '20%',
                        data: barData,
                    }
                ],
            }
            scatterChart.setOption(scatteroption);
            $(window).resize(scatterChart.resize);
        }
        function restLeft3(e){
            var scatterChart = echarts.init(document.getElementById("left3"));
            // 从数据中提取 groups 和 num
            var xAxisData = e.map(item => item.groups);
            var seriesData = e.map(item => ({ name: item.groups, value: item.num }));  // 构造 series.data

            let scatteroption  = {
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        z: 0
                    },
                    formatter: function (params) {
                        return params[0].name + ': ' + params[0].value; // 修改提示框显示
                    },
                    showContent: true // 显示提示框内容
                },
                dataZoom: {
                    show: true,
                    type: 'slider',
                    realtime: true,
                    height: 10,
                    start: 0,
                    end: 80,
                    textStyle:false,
                },
                xAxis: [{
                    type: 'category',
                    axisTick: {
                        show: false,
                        alignWithLabel: true
                    },
                    axisLabel: {
                        color: '#fff',
                        interval: 0
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#2b386a',
                            fontSize: 16
                        }
                    },
                    data: xAxisData // 使用提取的 groups
                }],
                yAxis: [{
                    type: 'value',
                    boundaryGap: ['0%', '10%'],
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 16
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#2b386a'
                        }
                    }
                }],
                series: [{
                    name: '区域数据',
                    type: 'bar',
                    barWidth: 26,
                    emphasis: {
                        label: {
                            show: true,
                            position: 'top',
                            distance: 8,
                            textStyle: {
                                color: '#fff',
                                fontSize: 18
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            show: true,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#07fb96'
                            },
                                {
                                    offset: 1,
                                    color: '#3149fc'
                                }
                            ])
                        }
                    },
                    data: seriesData // 使用构造后的 seriesData
                }]
            }
            scatterChart.setOption(scatteroption);
            $(window).resize(scatterChart.resize);
        }
        function restMid1(e){
            $('#mid1-1').html(e.zsyNum)
            $('#mid1-2').html(e.syNum)
            $('#mid1-3').html(e.ktNum)
        }
        function restMid2(e) {
            var myChart = echarts.init(document.getElementById("mid2"));
            var uploadedDataURL = "/report/hbs.json";
            myChart.showLoading();

            $.getJSON(uploadedDataURL, function(geoJson) {
                echarts.registerMap('hebei', geoJson);
                myChart.hideLoading();

                // 从传入的 e 值中提取数据
                var data = e.map(item => ({ name: item.groups, value: item.num }));

                // 计算数据的最大值，用于 visualMap
                var maxValue = Math.max(...data.map(item => item.value));

                option = {
                    tooltip: {
                        formatter: '{b}: {c}'  // 显示地名和数值
                    },
                    visualMap: {
                        min: 0,
                        max: maxValue,
                        show: false, // 隐藏visualMap组件
                        inRange: {
                            color: ['#ffeeee', '#ffcccc', '#ff9999', '#ff6666', '#ff3333', '#ff0000']
                        }
                    },
                    series: [{
                        name: '地图数据',
                        type: 'map',
                        zoom: 1.1,
                        roam: true,
                        mapType: 'hebei', // 替换为 hebei, 必须和geojson文件对应
                        itemStyle: {
                            normal: {
                                borderColor: 'brown',
                                areaColor: '#091e5d', // 区块默认透明
                                borderWidth: 1,
                                borderColor: '#ffcccc'
                            },
                            emphasis: {
                                areaColor: '#ffcccc', // 鼠标悬停时的颜色
                                label: {
                                    show: true,
                                    textStyle: {
                                        color: 'darkslategray',
                                    },
                                }
                            }
                        },
                        data: data, // 使用传入的数据
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    fontSize: 10,
                                    color: '#fff'
                                }
                            },
                            emphasis: {
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        }
                    }]
                };

                myChart.setOption(option);
                window.addEventListener("resize", function(){
                    myChart.resize();
                });
            });
        }

        function restRight11(e) {
            var myChart = echarts.init(document.getElementById("right1-1"));
            var data = e.map(item => ({ name: item.groups, value: item.num }));
            var colorScheme1 = ['#3daff6', '#4dc794', '#f76e6d', '#ffb980', '#8c9eff'];
            option = {
                tooltip: { trigger: "item", formatter: "{b}: {c} ({d}%)" },
                color: colorScheme1,
                series: [
                    {
                        name: "地区数据",
                        type: "pie",
                        radius: ["60%", "90%"],
                        avoidLabelOverlap: false,
                        roseType: 'radius',
                        label: {
                            show: true,
                            position: "center",
                            fontSize: 16,
                            fontWeight: "bold",
                            formatter: function () {
                                return `{total|信用分占比}`;
                            },
                            rich: {
                                total: {
                                    fontSize: 22,
                                    fontWeight: "bold",
                                    color: "#fff",
                                },
                            },
                        },
                        labelLine: { show: false },
                        data: data,
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", function(){
                myChart.resize();
            });
        }
        function restRight12(e) {
            var myChart = echarts.init(document.getElementById("right1-2"));
            var data = e.map(item => ({ name: item.groups, value: item.num }));
            var colorScheme2 = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed'];
            option = {
                tooltip: { trigger: "item", formatter: "{b}: {c} ({d}%)" },
                color: colorScheme2,
                series: [
                    {
                        name: "地区数据",
                        type: "pie",
                        radius: ["60%", "90%"],
                        avoidLabelOverlap: false,
                        roseType: 'radius',
                        label: {
                            show: true,
                            position: "center",
                            fontSize: 16,
                            fontWeight: "bold",
                            formatter: function () {
                                return `{total|年龄分布}`;
                            },
                            rich: {
                                total: {
                                    fontSize: 22,
                                    fontWeight: "bold",
                                    color: "#fff",
                                },
                            },
                        },
                        labelLine: { show: false },
                        data: data,
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", function(){
                myChart.resize();
            });
        }
        function restRight13(e) {
            var myChart = echarts.init(document.getElementById("right1-3"));
            var data = e.map(item => ({ name: item.groups, value: item.num }));
            var colorScheme3 = ['#dda0dd', '#90ee90', '#a0522d', '#d2691e', '#ff69b4'];
            option = {
                tooltip: { trigger: "item", formatter: "{b}: {c} ({d}%)" },
                color: colorScheme3,
                series: [
                    {
                        name: "地区数据",
                        type: "pie",
                        radius: ["60%", "90%"],
                        avoidLabelOverlap: false,
                        roseType: 'radius',
                        label: {
                            show: true,
                            position: "center",
                            fontSize: 16,
                            fontWeight: "bold",
                            formatter: function () {
                                return `{total|性别分布}`;
                            },
                            rich: {
                                total: {
                                    fontSize: 22,
                                    fontWeight: "bold",
                                    color: "#fff",
                                },
                            },
                        },
                        labelLine: { show: false },
                        data: data,
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", function(){
                myChart.resize();
            });
        }
        function restRight14(e) {
            var myChart = echarts.init(document.getElementById("right1-4"));
            var data = e.map(item => ({ name: item.groups, value: item.num }));
            var colorScheme4 = ['#e0ffff', '#bc8f8f', '#7fffd4', '#ffdab9', '#cd5c5c'];
            option = {
                tooltip: { trigger: "item", formatter: "{b}: {c} ({d}%)" },
                color: colorScheme4,
                series: [
                    {
                        name: "地区数据",
                        type: "pie",
                        radius: ["60%", "90%"],
                        avoidLabelOverlap: false,
                        roseType: 'radius',
                        label: {
                            show: true,
                            position: "center",
                            fontSize: 16,
                            fontWeight: "bold",
                            formatter: function () {
                                return `{total|工作类型分布}`;
                            },
                            rich: {
                                total: {
                                    fontSize: 22,
                                    fontWeight: "bold",
                                    color: "#fff",
                                },
                            },
                        },
                        labelLine: { show: false },
                        data: data,
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", function(){
                myChart.resize();
            });
        }

        function restRight2(e) {
            console.log(e)
            var myChart = echarts.init(document.getElementById('right2'));

            // 数据 - 从e值动态生成data， 包含color
            var data = e.map((item, index) => ({
                name: item.groups,
                value: item.num,
                //  随机生成颜色
                color: '#' + Math.floor(Math.random()*16777215).toString(16)
            }));

            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '25%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: data.map(item => item.name),
                    axisLabel: { color: '#fff' },
                    axisLine: { lineStyle: { color: '#fff' } },
                    axisTick: {
                        alignWithLabel: true,
                        lineStyle: { color: '#fff' }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: { color: '#fff' },
                    axisLine: { lineStyle: { color: '#fff' } },
                    splitLine: { lineStyle: { color: 'rgba(255,255,255,0.2)' } }
                },
                series: [{
                    type: 'bar',
                    barWidth: '60%',
                    data: data.map(item => ({
                        value: item.value,
                        itemStyle: { color: item.color }
                    })),
                    label: {
                        show: true,
                        position: 'top',
                        color: '#fff',
                        formatter: '{c}'
                    }
                }],
            };
            myChart.setOption(option);
            // 响应式调整
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        }

        function getReportData(url,ec){
            $.ajax({
                url: url,
                type: "GET",
                dataType: "json", // 预期返回的数据类型
                success: function(response) {
                    window[ec](response);
                    console.log("请求成功:", response);
                },
                error: function(xhr, status, error) {
                    console.error("请求失败:", status, error);
                    alert("请求失败: " + error);
                }
            });
        }
    </script>
</body>
</html>
